<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0px;
        }
        thead{
            background-color: #666;
            color: white;
        }
        td{
            border: 1px solid black;
            padding: 10px 20px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-table :data="users" :cols="cols">
            <!-- 
                被用于分发的定义标签所属实例只和定义时所作容器有关 
                    ==> 分发的标签作用域属于定义时的容器
            -->
            <!-- 
                作用域分发功能：
                    vue提供的 slot 分发标签可以完成自定义属性的绑定，而被绑定属性和取值将封装成一个对象,
                    作为组件标签使用时 v-slot 分发指令的接收值，通过v-slot= 取值方法定义变量名，在分发的模板
                    标签上直接获取该变量进行使用，使用规则类似于数据仓库

                作用域解构分发功能：
                    在作用域分发基础上，使用ES6解构赋值规范，对v-slot 回传数据变量进行精细化定义
             -->
            <template v-slot:set="obj">
                <!-- {{ obj }} -->
                <input type="button" value="删除" @click="removeItem(obj)">
                <input type="button" value="修改">
            </template>
            <template v-slot:demo="{$index}">
                <span>{{ $index }}</span>
            </template>
            <template v-slot:username="{ row }">
                <input type="text" v-model="row.username">
            </template>
        </my-table>
    </div>

    <script type="text/x-template" id="my-table">
        <table>
            <thead>
                <tr>
                    <td v-for="(col, index) in cols" :key="index">{{ col.title }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in data" :key="item.id">
                    <td v-for="(col, j) in cols" :key="j">
                        <slot 
                            v-if="col.template" 
                            :name="col.template"
                            :$index=" index "
                            :row=" item "
                            :col=" col "
                        ></slot>
                        <template v-else>{{ item[ col.key ] }}</template>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>

    <script>
        Vue.component("MyTable", {
            template:"#my-table",
            props:{
                data:{
                    type:Array,
                    default(){
                        return []
                    }
                },
                cols:{
                    type:Array,
                    default(){
                        return []
                    }
                }
            },
            // methods: {
            //     removeItem(){
            //         console.log(111)
            //     }
            // },
        })
        new Vue({
            el: "#app",
            data: {
                cols:[
                    { key:"id",title:"编号" },
                    { key:"role_name",title:"权限" },
                    { key:"username",title:"登录名" },
                    { key:"email",title:"邮箱" },
                    { key:"mobile",title:"电话" },
                    { title:"操作",template:"set" },
                    { title:"解构分发-$index",template:"demo" },
                    { title:"引用数据共享操作",template:"username" }
                ],
                users: [
                    {
                        "id": 500,
                        "role_name": "超级管理员",
                        "username": "admin",
                        "create_time": 1486720211,
                        "mobile": "123456",
                        "email": "123@sina.com",
                        "mg_state": true
                    },
                    {
                        "id": 611,
                        "role_name": "超级管理员",
                        "username": "test001",
                        "create_time": 1659345193,
                        "mobile": "13900000000",
                        "email": "123@qq.com",
                        "mg_state": false
                    },
                    {
                        "id": 613,
                        "role_name": "超级管理员",
                        "username": "sss",
                        "create_time": 1659354949,
                        "mobile": "sssss",
                        "email": "ssss",
                        "mg_state": true
                    }
                ]
            },
            methods: {
                removeItem(obj){
                    console.log(111,obj)
                    this.users.splice(obj.$index,1)
                }
            },
        })
    </script>
</body>

</html>